import React from "react";
import { BrowserRouter, Navigate, useRoutes } from "react-router-dom";
import MainLayout from "../components/MainLayout";
import AuthWrapper from "../components/AuthWrapper";


const Data = React.lazy(() => import('../pages/Data'))
const Home = React.lazy(() => import('../pages/Home'))
const Login = React.lazy(() => import('../pages/Login'))
const Mine = React.lazy(() => import('../pages/Mine'))
const Plan = React.lazy(() => import('../pages/Plan'))
const Register = React.lazy(() => import('../pages/Register'))
const AI = React.lazy(() => import('../pages/AI'))

const routes = [
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/register',
        element: <Register />
    },
    {
        path: '/',
        element: (
            <AuthWrapper>
                <MainLayout />
            </AuthWrapper>
        ),
        children: [
            {
                index: true,
                element: <Navigate to="/home" replace />
            },
            {
                path: 'data',
                element: <Data />
            },
            {
                path: 'home',
                element: <Home />
            },
            {
                path: 'mine',
                element: <Mine />
            },
            {
                path: 'plan',
                element: <Plan />
            },
            {
                path: 'ai',
                element: <AI />
            }
        ]
    }

]

function WrapperRoutes() {
    const ele = useRoutes(routes)
    return ele
}

export default function Router() {
    return (
        <BrowserRouter>
            <WrapperRoutes />
        </BrowserRouter>
    )
}
